import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}



class GradientAppBar extends StatelessWidget implements PreferredSizeWidget {
  final String title;
  final double height;
  final Gradient gradient;

 const GradientAppBar({
    super.key,
    required this.title,
    required this.height,
    required this.gradient,
  });

  @override
  Widget build(BuildContext context) {
    return Container(
      height: height,
      decoration: BoxDecoration(
        gradient: gradient,
      ),
      child: AppBar(
        backgroundColor: Colors.transparent,
        elevation: 0,
        title: Text(title, style: const TextStyle(fontSize: 20,color: Colors.white)),
      ),
    );
  }

  @override
  Size get preferredSize => Size.fromHeight(height);
}


class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});
  @override
  State<MyHomePage> createState() => _MyHomePageState();
}


class _MyHomePageState extends State<MyHomePage> {
  
  int _selectedIndex = 0;
  
  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

   static const List<String> _appBarTitles = <String>[
    '',
    '热门',
    '兑换',
    '邀请',
  ];

  @override
  Widget build(BuildContext context) {
    
    var gradientAppBar = GradientAppBar(
      title: _appBarTitles[_selectedIndex],
      height: 100,
      gradient:const LinearGradient(
        colors: [Colors.blue, Colors.purple],
      ),
    );
      
    var listview = ListView(
        children: const <Widget>[
          CustomWidget(image: 'https://www.qzqn8.com/wp-content/uploads/2022/06/1-17.jpg', name: 'hello world!', money: '1000',),
          HorizontalIconList(),
          // Other widgets here
        ],
      );


    return Scaffold(
      appBar:gradientAppBar,
      body:listview,
      bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: '首页',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.public),
            label: '热门',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.redeem),
            label: '兑换',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.inventory),
            label: '邀请',
          ),
        ],
        currentIndex: _selectedIndex,
        selectedItemColor: Colors.amber[800],
        unselectedItemColor: Colors.grey,
        showSelectedLabels: true,
        showUnselectedLabels: true,
        onTap: _onItemTapped,
      ),
    );
  }
  
}



class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {

    return const MaterialApp(
      home: MyHomePage(),
    );
  }
}

class CustomWidget extends StatelessWidget {
  final String image;
  final String name;
  final String money;

  const CustomWidget({
    super.key,
    required this.image,
    required this.name,
    required this.money,
  });

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.all(5),
      decoration: BoxDecoration(
        color: Colors.grey[200],
        borderRadius: BorderRadius.circular(8),
      ),
      height: 100,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          
          // Left Box with Circular Avatar and Text
          Row(children: [
            Container(
              width: 80,
              height: 80,
              decoration: BoxDecoration(
                shape: BoxShape.circle,
                image: DecorationImage(
                  image: NetworkImage(image), // Use your image URL here
                  fit: BoxFit.cover,
                ),
              ),
            ),
            const SizedBox(width: 16),
            Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text(
                  'hi, $name',
                  style: const TextStyle(fontSize: 14, fontWeight: FontWeight.bold),
                ),
                const SizedBox(height: 30),
              ],
            ),

          ],),

          Column(

            mainAxisAlignment: MainAxisAlignment.end,
            children: [
              const Text(
                  'Your Earnings',
                  style: TextStyle(color: Colors.black, fontSize: 14, fontWeight: FontWeight.bold),
              ),
              const SizedBox(height: 8),
              // Right Box with Earnings and Coin Icon
              Container(
                width: 100,
                padding: const EdgeInsets.all(8),
                decoration: BoxDecoration(
                  color: Colors.black.withOpacity(0.5),
                  borderRadius: BorderRadius.circular(20),
                ),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        const Icon(
                          Icons.money,
                          color: Colors.yellow,
                        ),
                        const SizedBox(width: 4),
                        Text(
                          money,
                          style: const TextStyle(
                            color: Colors.white,
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                      ],
                    ),
                  ],
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }
}





class HorizontalIconList extends StatelessWidget {
  const HorizontalIconList({super.key});

  final List<IconData> icons = const [
    Icons.home,
    Icons.work,
    Icons.school,
    Icons.shopping_cart,
    Icons.restaurant,
    Icons.directions_car,
  ];

  final List<String> titles = const[
    'Home',
    'Work',
    'School',
    'Shopping',
    'Restaurant',
    'Car',
  ];




  
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.all(8),
      height: 120,
      child: ListView.builder(
        scrollDirection: Axis.horizontal,
        physics: const BouncingScrollPhysics(), //添加一点惯性移动效果
        itemCount: icons.length,
        itemBuilder: (context, index) {
          return Padding(
            padding: const EdgeInsets.all(8.0),
            child: Column(
              children: [
                Icon(
                  icons[index],
                  size: 50,
                ),
                const SizedBox(height: 5),
                Text(
                  titles[index],
                  style: const TextStyle(fontSize: 14),
                ),
              ],
            ),
          );
        },
      ),
    );
  }
}




